import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { withRouter } from 'react-router';
import {
  SendOutlined,
  CheckOutlined
} from '@ant-design/icons';
import {connect} from 'react-redux';



const { Sider } = Layout;

class SideMenu extends Component {
  state = {
    collapsed: false,
  };
  handleClick = (obj) => {
    this.props.history.push(obj.key);    
  };
  render() {
    let pathname = this.props.location.pathname;
    let openKeys = [ "/" + pathname.split('/')[1] ];
    let SelectedKeys = [pathname]
    return (
      <Sider trigger={null} collapsible collapsed={this.props.isCollapsed}>
        <div className="logo" />
        <Menu theme="dark" mode="inline"
         defaultOpenKeys = {openKeys} 
         selectedKeys = { SelectedKeys }
         onClick={this.handleClick}>
          <Menu.Item key="/todo" icon={<SendOutlined />}>
            待办事项
          </Menu.Item>
          <Menu.Item key="/aldo" icon={<CheckOutlined />}>
            已办事项
          </Menu.Item>
        </Menu>
      </Sider>
    )
  }
}



const mapStateToProps = (state) => {  
  return {
    isCollapsed:state.iscollapsed
  }
}

export default withRouter(connect(mapStateToProps)(SideMenu))
// export default withRouter(SideMenu)